<template>
	<view class="page-container">
		<top-total :totalWallet="totalWallet"/>
		<wallets-block type="assets" :walletList="assetsList"/>
		<wallets-block type="liabilities" :walletList="liabilitiesList"/>
		<wallets-block type="empty-wallet" :walletList="emptyWalletList"/>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import topTotal from './components/top-total.vue'
	import walletsBlock from './components/wallets-block.vue'
	import { getProperties } from '@/api/bill'
	import { convertToTwoDecimal } from '@/utils/count-utils'
	const walletList = ref([])
	const assetsList = computed(() => {
		return walletList.value.filter((item)=>{
			return item.count > 0
		})
	})
	const liabilitiesList = computed(() => {
		return walletList.value.filter((item)=>{
			return item.count < 0
		})
	})
	const emptyWalletList = computed(() => {
		return walletList.value.filter((item)=>{
			return item.count == 0
		})
	})
	const totalWallet = computed(() => {
		let total = 0;
		let assets = 0;
		let liabilities = 0;
		assetsList.value.forEach((item)=>{
			assets = convertToTwoDecimal(assets + item.count)
		});
		liabilitiesList.value.forEach((item)=>{
			liabilities = convertToTwoDecimal(liabilities + item.count)
		})
		total = convertToTwoDecimal(assets + liabilities);
		return {
			assets,
			liabilities,
			total
		}
	})
	const getWalletList = async () => {
		const res = await getProperties()
		walletList.value = res.sort((a, b)=>{
			return b.count - a.count
		})
	}
	getWalletList();
</script>